/**
 * Props
 *  调用组件时，传递的属性，会组合成一个对象传递到组件内，这个对象就叫做 props。props中的每一项就叫做一个 prop
 *
 *  与 Vue 的不同：
 *    1. 没有对 class 与 style 做特殊处理，没有合并，多次传递会后面的覆盖前面的。
 *      <div class="box1" class="box2"></div>
 *      <div style="color: red;" style="fontSize: 18px;"></div>
 *    2. Vue 中有一个叫做 attriblute 的概念，react 没有。
 *      组件开始标签与结束标签中的内容也是一个 prop 。这个prop名字叫做 children
 *
 * Props 的校验，（只是开发时的一个警告）
 *    1. 需要额外安装一个npm包，prop-types （以前这个包的内容是在React核心中的，后面将它单独拆成了一个包。）
 *    2. 设置组件的 propTypes 属性，来定义校验规则
 *      PS: 针对类组件，可以将 propTypes 直接定义在 类的代码中。而不是外面
 *
 *    一般你在项目中，推荐使用 TypeScript ，就不需要搞这种 prop-types 的校验了。直接使用 TS 的校验更好。
 *
 * Props 的默认值
 *    设置组件的 defaultProps 属性，即可。
 */

import React from "react";
import ReactDOM from "react-dom/client";
// 引入 prop-types 这个包，提供的各种类型校验
import ABC from "prop-types";

class Hello extends React.Component {
  // 通过 static 来设置 propTypes
  static propTypes = {
    name: ABC.string, // string 类型
  };

  // 通过 static 来设置 defaultProps
  static defaultProps = {
    age: 18,
  };

  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children}
        <h1>Hello</h1>
      </div>
    );
  }
}
// Hello.propTypes = {
//   name: ABC.string, // string 类型
// };

// 设置默认Props
// Hello.defaultProps = {
//   age: 18,
// };

function World() {
  return (
    <div>
      <h1>World</h1>
    </div>
  );
}
World.propTypes = {
  name: ABC.number, // number 类型
};

// 设置默认Props
World.defaultProps = {
  age: 20,
};

// 创建 root 容器
const root = ReactDOM.createRoot(document.querySelector("#root"));
// root.render
root.render(
  <div>
    <Hello name={18}>
      <p>看我</p>
    </Hello>

    <World name="张三" />
  </div>
);
